<template>
  <!-- 底部结算 -->
  <div class="setbottomEle">
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="goShow"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

    <!-- 点击加入购物车 -->
    <van-sku
      v-model="show"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
      @stepper-change="onStepperChange"
    />
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      show: false,
      goodsNum: 1,
      sku: {
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            v: [
              {
                id: "001", // skuValueId：规格值 id
                name: "红色", // skuValueName：规格值名称
                imgUrl:
                  "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl:
                  "http://img.happymmall.com/570186f3-c0d2-4336-a1b7-3e1aff88f73a.jpg", // 用于预览显示的规格类目图片
              },
              {
                id: "002",
                name: "蓝色",
                imgUrl:
                  "http://img.happymmall.com/a73b6326-1204-4937-aa88-097c9eda8a2a.jpg",
                previewImgUrl:
                  "http://img.happymmall.com/a73b6326-1204-4937-aa88-097c9eda8a2a.jpg",
              },
            ],
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
          },
        ],
        list: [
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "001", // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: 50, // 当前 sku 组合对应的库存
          },
          {
            id: 2259, // skuId，下单时后端需要
            price: 100, // 价格（单位分）
            s1: "002", // 规格类目 k_s 为 s1 的对应规格值 id
            stock_num: 50, // 当前 sku 组合对应的库存
          },
        ],
        price: "100", // 默认价格（单位元）
        stock_num: 100, // 商品总库存
        collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
      },
      goods: {
        // 商品标题
        title: "测试商品",
        // 默认商品 sku 缩略图
        picture: "",
      },
    };
  },
  props: ["allInfo", "lbImg"],
  methods: {
    // 设置对应的值
    setInfo() {
      this.goods.picture = this.allInfo.imageHost + this.lbImg[0]; // 默认缩略图
      this.sku.price = this.allInfo.price; // 单价
      this.sku.stock_num = this.allInfo.stock - 0; // 库存
      // 第一类商品图
      this.sku.tree[0].v[0].imgUrl = this.allInfo.imageHost + this.lbImg[0];
      this.sku.tree[0].v[0].previewImgUrl =
        this.allInfo.imageHost + this.lbImg[0];
      // 第一类商品对应数据，单价、库存
      this.sku.list[0].price = this.allInfo.price * 100;
      this.sku.list[0].stock_num = this.allInfo.stock - 0;

      // 第二类商品图
      this.sku.tree[0].v[1].imgUrl = this.allInfo.imageHost + this.lbImg[2];
      this.sku.tree[0].v[1].previewImgUrl =
        this.allInfo.imageHost + this.lbImg[2];
      // 第二类商品对应数据，单价、库存
      this.sku.list[1].price = this.allInfo.price * 100;
      this.sku.list[1].stock_num = this.allInfo.stock - 0;
    },
    goShow() {
      this.show = true;
    },
    // 底部购物栏组件
    onBuyClicked() {
      console.log("第一个");
    },
    // 添加购物车
    onAddCartClicked() {
      // 判断是否为登录状态
      if (!window.sessionStorage.getItem("token")) {
        this.$router.push("/loginPage");
      }
      let datainfo = {
        productId: this.$route.params.id,
        count: this.goodsNum,
      };
      let info = {
        type: "post",
        url: "/cart/add",
        head: "application/x-www-form-urlencoded",
        data: datainfo,
      };

      this.$netWork(info).then((res) => {
        if (res.data.status === 0) {
          Toast.success("添加成功");
          // 将购物车全选框变为 false
          this.$store.commit("setAllchecked");
          this.$router.push("/shoppingCar");
        } else {
          Toast.fail("添加失败");
        }
      });
    },
    // 监听计步器的值发生改变
    onStepperChange(val) {
      this.goodsNum = val;
    },
  },
  watch: {
    allInfo(newVal, oldVal) {
      this.skuInfo = newVal;
      newVal && this.setInfo();
    },
  },
};
</script>

<style lang="scss" scoped></style>
